<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <script type="text/javascript" src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script><script type="text/javascript" src="https://unpkg.com/vue-monoplasty-slide-verify@1.3.1/dist/slide-verify.js"></script>
    <title>vue-monoplasty-slide-verify</title>
  </head>
  <body>
    <p>
      <a href="https://www.npmjs.com/package/vue-monoplasty-slide-verify" target="_blank">
        vue-monoplasty-slide-verify
      </a>
    </p>
    <div id="app">
      <slide-verify
        ref="slideblock"
        :imgs="slideImgs"
        @again="onAgain"
        @fulfilled="onFulfilled"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
        :accuracy="accuracy"
        :slider-text="text"
      ></slide-verify>
      <p>
        <button @click="handleClick">刷新</button>
      </p>
      <p>{{ msg }}</p>
    </div>
    <script>
      Vue.use(SlideVerify.default)
      new Vue({
        el: '#app',
        data() {
          return {
            msg: '',
            text: '向右滑',
            // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
            accuracy: 3,
            // 可自定义拼图图片数组，未传则使用插件内默认的图片数组 canvas 加载注意图片跨域问题
            slideImgs: ['/logo.png']
          }
        },
        methods: {
          onSuccess(times) {
            if (times > 5e3) {
              console.log(times, '超时了')
              return
            }
            this.msg = `login success, 耗时${(times / 1000).toFixed(1)}s`
            console.log('去登录')
            this.$emit('slideSuccess') // 验证成功向父组件发送函数
          },
          onFail() {
            console.log('验证不通过')
            this.msg = ''
          },
          onRefresh() {
            console.log('点击了刷新小图标')
            this.msg = ''
          },
          onFulfilled() {
            console.log('刷新成功啦！')
          },
          onAgain() {
            console.log('检测到非人为操作的哦！')
            this.msg = 'try again'
            // 刷新
            this.$refs.slideblock.reset()
          },
          handleClick() {
            // 父组件直接可以调用刷新方法
            this.$refs.slideblock.reset()
          }
        }
      })
    </script>
  </body>
</html>
